import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { BlockInfo } from './Block-info';
import * as actionTypes from '@src/model/actionType';
import { timeFormatYMDHms } from '@src/utils/index';
import { get as _get } from 'lodash';

export function NewestBlockInfo(props) {
  const ChainId = _get(props, ['ChainId'], '');
  const title1 = _get(props, ['title1'], '本区块哈希');
  const title2 = _get(props, ['title2'], '上一区块哈希');
  // @ts-ignore
  const latestBlockStore = useSelector((state) => state.latestBlockReducer);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: actionTypes.fetchLatestBlock, params: { ChainId } });
  }, [dispatch]);

  return (
    <div
      style={{
        backgroundColor: '#fff',
        marginTop: '20px',
        textAlign: 'center',
        padding: '17px 21px',
        border: '1px solid #DDDDDD',
      }}
    >
      <h6
        style={{
          fontSize: '14px',
          fontFamily: 'MicrosoftYaHei-Bold',
          color: '#333',
          textAlign: 'left',
          marginBottom: '15px',
        }}
      >
        最新区块信息
      </h6>
      <BlockInfo
        time={timeFormatYMDHms(latestBlockStore.Timestamp)}
        {...latestBlockStore}
        title1={title1}
        title2={title2}
      ></BlockInfo>
    </div>
  );
}
